<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>自主导航</title>	
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="http://cdn.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
		<script src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
		<script src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
		<script src="http://cdn.robotwebtools.org/ros2djs/current/ros2d.js"></script>
		<script src="js/map/nav2d.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layui/lay/modules/form.js"></script>
		<script>
 			/**
		   	* Setup all visualization elements when the page is loaded. 
	  	 	*/
	  	 	var wsurl = getQueryString('url');
		  	function init() {
	    		// Connect to ROS.
		    	var ros = new ROSLIB.Ros({
		      		url : wsurl
		    	});
		
		    	// Create the main viewer.
		    	var viewer = new ROS2D.Viewer({
		      		divID : 'nav',
		      		width : 350,
		      		height : 400
	    		});
		
		    	// Setup the nav client.
		    	var nav = NAV2D.OccupancyGridClientNav({
		      		ros : ros,
		      		rootObject : viewer.scene,
		      		viewer : viewer,
		      		serverName : '/pr2_move_base'
		    	});
				
				layui.use('form', function(){
					var form = layui.form();
					$.ajax({
						url : 'http://192.168.1.116/main/LocatingPoint.php',
						type : 'post',
						dataType : "jsonp",
						jsonp:'callback', 
						success : function(result){
							for(var i in result){							
								var point = '<option value = '+result[i].x+'/'+result[i].y+'>'+result[i].name+'</option>';
								$('.point').append($(point));
							}
							form.render('select');
						},
						error: function () {
							layer.alert('定位点加载失败！请检查连接并刷新重试！');
						},
					});
					
					var move_base_msgs = new ROSLIB.Topic({
						ros : ros,
						name : '/pr2_move_base/goal',
						messageType : 'move_base_msgs/MoveBaseActionGoal'
					});
					
					var goal;
					
					form.on('select', function(data){
						var x = data.value.split('/')[0];
						var y = data.value.split('/')[1];
						goal = new ROSLIB.Message({
							"goal_id":{
								"stamp":{
									"secs":0,
									"nsecs":0
								},
								"id":"goal_0.5561365543379335_1489978682161"
							},
							"goal":{
								"target_pose":{
									"header":{
										"frame_id":"/map"
									},
									"pose":{
										"position":{
											"x":parseFloat(x),
											"y":parseFloat(y),
											"z":0
										},
										"orientation":{
											"x":0,
											"y":0,
											"z":0,
											"w":1
										}
									}
								}
							}
						});
					});
					
					$('#move').click(function(){
						if(goal){
							move_base_msgs.publish(goal)
						}else{
							layer.alert('请选择定位点');
						}
					})
					
				});				
		  	}
						
		  	function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
				    return (r[2]);
				}
				return null;
			}
		</script>
	</head>
	<body onload="init()">
		<section id="nav"></section>
		<section id="camera">
			<p>摄像头画面</p>
		</section>
		<section>
			<form class="layui-form" action="">
				<div style="width: 200px;">
					<select class="point">
		        		<option value="">定位点1——</option>
		      		</select>
					<button class="layui-btn layui-btn-radius layui-btn-small" type="button" id="move">移动</button>
		      		<!--<select class="point">
		        		<option value="">定位点2——</option>
		      		</select>
		      		<select class="point">
		        		<option value="">定位点3——</option>
		      		</select>
		      		<select class="point">
		        		<option value="">定位点4——</option>
		      		</select>-->
				</div>	      		
			</form>						    
		</section>
	</body>
</html>
